How to Add a Group Day Event Component in Framer

In this tutorial, you will learn how to set up a Group Day Event service in Bookla and connect it to a Group Day Event component in Framer.

Prerequisites

Before setting up Framer, make sure everything is configured correctly in the Bookla Platform.

Create a Company in Bookla

This step is essential because it links your Company ID to the Framer component.

• Open Bookla Platform and click "Create Account".
• Create an account using your credentials, or log in if you already have one.
• Create a new company or use an invitation code to access an existing one.

Set Up Resources

Resources represent the locations, rooms, equipment, or staff members that provide the service.

1. Go to your Bookla account.
2. Open the "Resources" section.
3. Click the "+ New Resource" button.
4. Enter a title for the resource. If needed, you can also change the resource color.
5. Click the "Create" button.

Note
For Group services, you do not need to add working hours for resources. The availability of the service will be controlled through the service schedule instead.

Service Setup

1. Go to the "Services" section.
2. Click the "+ New Service" button.
3. Enter the service name. If needed, you can also change the service color.
4. Click the "Next" button.
5. Select the service type. For this tutorial, choose "Group".
6. Click the "Next" button.
7. Set the service duration.
8. Choose the booking policy.
9. Click the "Create" button.

Linking a Service with a Resource

1. Click the "Link with Resource" button.
2. Select the resources that provide this service.
3. Click the "Link Resources" button.

Setting Up the Service Schedule

Group services use the schedule configured inside the service settings.

1. Open the created Group service.
2. Go to the "Schedule" section.
3. Click the "+ Add Slot" button.
4. Select the duration and resource.
5. Set the starting date and time.
6. Select whether the slot does not repeat, repeats weekly, or uses custom Recurrence Rules.

Learn about Recurrence Rules here.

7. Click the "Create" button.

Setting the Group Capacity

Group services allow multiple clients to book the same time slot.

1. Go to the "Capacity" section.
2. Click "+ Add capacity rule".
3. Enter the maximum number of spots allowed per booking time slot.
4. Click the "Create" button.

Adding the Currency and Setting Up the Tax Rate

1. Go to the "Pricing" section.
2. Click "Click to set" under Currency.
3. Select your desired currency.
4. Click the "Save" button.
5. Click "Click to set" under Tax rate.
6. Enter your country's or state's required tax rate.
7. Choose whether the tax is included in the price.
8. Click the "Save" button.

Setting Up Price Rules

1. Click the "+ Add price rule" button.
2. Configure the following parameters:
   • Price
   • Compared price (optional)
3. Optionally, set restrictions for specific days, times, or resources.
4. Click the "Create" button.

Service Settings

In the "Settings" section, you can configure additional options for your Group service:

• Booking Policy: Defines how bookings are confirmed. For example, with the Instant policy, bookings are automatically confirmed without requiring manual approval.
• Availability Period: Determines how far in advance clients can book the service.
• Duration: Defines the length of each booking slot.
• Buffer Before: Adds a required time period before each booking, preventing bookings from being created too close to the previous activity.
• Exclusive Slot: When enabled, each available time slot can only be booked exclusively.
• Allow Ongoing Slot: Allows clients to book an ongoing time slot when enabled.

Open-source Group Day Event component integration

We recently released open-source booking components that you can use on your website.

For example, we have a dedicated category of Framer components that can be added as code components in your Framer projects. You can edit and modify them, or even use them as prompts for ChatGPT or another AI tool to generate variations or add new features.

In this tutorial, we’ll use the Group Day Event component.

Open-source Components

The component allows clients to select a date and book an available Group Day Event.

How to use the Group Day Event component

1. Go to Open-source Components.
2. Find the Group Day Event component.
3. Scroll down to "Component.tsx".
4. Click on "Component.tsx".
5. Copy the code.

6. Go to Framer.
7. Open the "Assets" section.
8. In the code section, click "+".
9. Click "New Code File".
10. Enter a title, for example "BookingComponent".
11. Click "Create".

Note
By default, it is an animated square.

12. To change it, replace the default code with the copied code for the Group Day Event component.

13. Go back to the page.
14. Select the container where you want to place the component.
15. Go to the "Assets" section.
16. Drag and drop the component onto the page.
17. Adjust the component’s width and height.
18. Make any desired styling changes, such as removing padding or changing the selected color and button color.

How to connect the component to Bookla

1. Go to the Bookla section.
2. Check the API region in Bookla (US or EU).
3. Paste it into the API Region field.
4. To copy and paste the API key:
   • Go to the Bookla Platform.
   • Go to the Developers section.
   • Click "Create API key".
   • Enter a name, for example "Group Day Event key".
   • Select only the following client permissions: Client Service, Client Resource, and Guest Client.
   • Copy the API key. You will have access to it only once.
   • Paste it into Framer in the "API key" field.

5. To copy and paste the Company ID:
   • Go to the Bookla Platform.
   • Click on "Company".
   • Copy the ID at the top.
   • Paste it into Framer in the "Company ID" field.
6. To copy and paste the Service ID:
   • Go to the Bookla Platform.
   • Go to the "Services" section.
   • Select the relevant Group service.
   • Copy the Service ID.
   • Paste it into Framer in the "Service ID" field.

Testing the component

1. Go to the page.
2. Select an available date.
3. Click "Continue".
4. Enter the required information.
5. Click "Make booking".
6. The reservation is created, and you can also see it in the Bookla Platform.